<template>
  <view class="radar_content">
    <tn-nav-bar
      fixed
      :beforeBack="goBack"
      class="tn-color-white"
      :bottomShadow="false"
      backgroundColor="#362e7a"
      >灵魂匹配</tn-nav-bar
    >
    <view
      class="content-box"
      :style="{ paddingTop: vuex_custom_bar_height + 'px' }"
      v-if="!qiyushow"
    >
      <div class="portrait-container" v-if="pipeishow">
        <!-- 背景同心圆系统 -->
        <div class="concentric-bg">
          <div
            v-for="n in 3"
            :key="n"
            class="bg-circle"
            :style="{
              width: `${(n + 1) * 200}rpx`,
              height: `${(n + 1) * 200}rpx`,
              border: 'none',
              backgroundColor: `rgba(216, 216, 216, 0.1)`,
            }"
          ></div>
        </div>
        <!-- <img src="../static/other/second.png" alt="" /> -->
        <view class="avatar"></view>
      </div>
      <div class="rotating-box" v-else>
        <view class="rotating-element"> </view>
        <view v-if="userbody.avatar" class="avatar"
          ><img :src="userbody.avatar" alt=""
        /></view>
      </div>
      <view style="width: 432rpx; margin: 0 auto"
        ><tn-button
          shape="round"
          height="100rpx"
          class="matching-button"
          @click="linghun()"
        >
          {{ flag ? "匹配中" : "立即匹配" }}
          <div class="loading-dots" v-if="flag">
            <span class="dot">.</span>
            <span class="dot">.</span>
            <span class="dot">.</span>
          </div>
        </tn-button></view
      >
    </view>
    <view
      class="content-box2"
      :style="{ paddingTop: vuex_custom_bar_height + 'px' }"
      v-else
    >
      <view
        class="contentInfo tn-flex tn-flex-row-left tn-flex-col-bottom"
        :style="{
          background: `url(${userbody.avatar}) no-repeat center/100% 100%`,
        }"
      >
        <view class="content tn-flex tn-flex-row-left tn-flex-col-bottom">
          <view v-if="userbody.avatar" class="avatar"
            ><img :src="userbody.avatar" alt=""
          /></view>
          <view class="rightInfo tn-flex tn-flex-row-center tn-flex-direction-column">
            <p class="name tn-flex tn-flex-col-center">{{ userbody.nickname }}<view v-if="false" class="level">LV.1</view></p>
            <div class="tagbox"><div class="tag" v-for="(item, index) in textList" :key="index">{{ item.text }}</div></div>
            <p class="dec">{{ userbody.dec }}</p>
          </view>
        </view>
      </view>
      <view style="width: 432rpx; margin: 0 auto" v-if="qiyushow"
        ><tn-button
          shape="round"
          height="100rpx"
          class="matching-button matching-button2"
          @click="
            navigateToFn({
              url: '/circleMixinPages/blogger_other?id=' + userbody.id,
              checkLogin: true,
            })
          "
        >
          开始聊天
        </tn-button></view
      >
    </view>
  </view>
</template>
<script>
import { host, webSocket, secretkey, sdkappid } from "@/siteinfo.js";

///语音/
import permision from "@/TrtcCloud/permission.js";
import TrtcCloud from "@/TrtcCloud/lib/index";
import {
  TRTCAppScene,
  TRTCVideoStreamType,
  TRTCCloudDef,
} from "@/TrtcCloud/lib/TrtcDefines";
import { genTestUserSig } from "@/debug/GenerateTestUserSig";

import { TRTCRoleType } from "@/TrtcCloud/lib/TrtcDefines";

///

let timer;
const audioContext = uni.createInnerAudioContext();
const recorderManager = uni.getRecorderManager();
import template_page_mixin from "@/libs/mixin/template_page_mixin.js";
import NavIndexButton from "@/libs/components/nav-index-button.vue";
export default {
  name: "TemplateWave",
  mixins: [template_page_mixin],
  components: {
    NavIndexButton,
  },
  data() {
    return {
      titletip: "聊天结束了",
      tishishow: false,
      tanchutongyi: false,
      state: false,
      fauser_id: 0,
      room_id: "123456789",
      button: [
        {
          text: "拒绝",
          backgroundColor: "#c1c1c1",
          fontColor: "#000000",
        },
        {
          text: "同意",
          backgroundColor: "#ffff00",
          fontColor: "#000000",
        },
      ],
      textList:[
        {
          text:'INFJ'
        },
        {
          text:'天蝎座'
        },
        {
          text:'甜妹'
        },
      ],
      // 间隔一分钟 后可以再次发送
      pipeishow: true,
      qiyushow: false,
      flag: false,
      intervalTime: 60,
      // 显示在页面上的倒计时
      showIntervalStr: 0,
      jinggaoshow: false,
      userlist: [],
      body: [],
      userbody: [],
      sdkAppId: 0,
      userSig: "",
      userId: 0,
      roomId: 0,
      role: TRTCRoleType.TRTCRoleAnchor, //身份观众
      appScene: TRTCAppScene.TRTCAppSceneAudioCall, // 语音聊天室模式
      isFrontCamera: true,
      streamType: TRTCVideoStreamType.TRTCVideoStreamTypeBig,

      remoteUserId: "",

      remoteAudioMuteState: false,
      localAudioMuteState: false,
      localVideoMuteState: false,
    };
  },
  onLoad() {
    this.userId = "user_" + uni.getStorageSync("user_id");
    this.roomId = uni.getStorageSync("user_id");
    // #ifdef APP
    const { userSig } = genTestUserSig(this.userId, sdkappid, secretkey);
    this.sdkAppId = sdkappid;
    this.userSig = userSig;
    if (!this.sdkAppId || !userSig) {
      uni.showToast({
        title: "请填写 sdkAppId、userSig",
        icon: "none",
      });
    }
    if (uni.getSystemInfoSync().platform === "android") {
      permision.requestAndroidPermission("android.permission.RECORD_AUDIO");
    }
    // #endif

    // 注册接受消息监听
    uni.$on("talkMessage", (message) => {
      switch (message.type) {
        case "roomqita": //通用广播
          this.zhixing(message);
          return;
      }
    });
  },
  onUnload() {},
  unmounted() {},
  onBackPress() {},
  methods: {
    goBack() {
      // 通过判断当前页面的页面栈信息，是否有上一页进行返回，如果没有则跳转到首页
      const pages = getCurrentPages();
      if (pages && pages.length > 0) {
        const firstPage = pages[0];
        if (
          pages.length == 1 &&
          (!firstPage.route || firstPage.route != "pages/index")
        ) {
          uni.reLaunch({
            url: "/pages/index",
          });
        } else {
          uni.navigateBack({
            delta: 1,
          });
        }
      } else {
        uni.reLaunch({
          url: "/pages/index",
        });
      }
    },

    async linghun() {
      if (!uni.getStorageSync("token")) {
        this.loginBoxFlag = true;
        return;
      }

      this.pipeishow = false;
      this.flag = true;
      setTimeout(() => {
        this.linghunpass();
      }, 2000);
    },
    async linghunpass() {
      let that = this;
      let result = await that.$request({
        loading: 0,
        method: "post",
        url: "/api/four/userMatch",
        data: {},
      });

      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          this.userbody = result.data.data;
          setTimeout(() => {
            this.pipeishow = true;
            this.qiyushow = true;
            this.flag = false;
          }, 2000);
        } else if (result.data.msg == "当前无人在线") {
          this.msg(result.data.msg);
        } else {
          let that = this;
          uni.showModal({
            title: "提示",
            content: result.data.msg,
            confirmText: "去完善",
            success: function (res) {
              if (res.confirm) {
                uni.navigateTo({
                  url: "/minePages/set",
                });
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            },
          });
        }
      } else {
        uni.showToast({
          icon: "none",
          title: that.$errorMsg,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.radar_content {
  width: 100%;
  height: 100vh;
}
.content-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.content-box2 {
  width: 100%;
  padding: 0 40rpx;
  .contentInfo {
    width: 100%;
    height: 872rpx;
    border-radius: 20rpx;
    margin-bottom: 60rpx;
    .content {
      width: 100%;
      height: 304rpx;
      padding: 24rpx 20rpx;
      box-sizing: border-box;
      background: linear-gradient(0deg, #000000 30%, rgba(0, 0, 0, 0) 100%);
      .avatar {
        width: 102rpx;
        height: 102rpx;
        box-sizing: border-box;
        border: 2px solid #24d4d1;
        border-radius: 100%;
        margin-right: 20rpx;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 100%;
        }
      }
      .rightInfo{
        height: 104rpx;
        .name{
          font-size: 28rpx;
          color: #fff;
          margin-bottom: 8rpx;
          .level{
            height: 28rpx;
            padding: 0 10rpx;
            font-size: 20rpx;
            font-weight: 900;
            color: #FFFFFF;
            margin-left: 20rpx;
            background: linear-gradient(270deg, #FF6CCE 0%, #F9A1BA 100%);
            border-radius: 14rpx;
          }
        }
        .tagbox{
          width: 100%;
          height: 28rpx;
          display: flex;
          margin-bottom: 8rpx;
          .tag{
            padding: 0 16rpx;
            height: 100%;
            background: #474747;
            color: rgba(255, 255, 255, 0.5);
            margin-right: 16rpx;
            border-radius: 14rpx;
            font-size: 20rpx;
          }
        }
        .dec{
            font-size: 20rpx;
            color: #999999;
        }
      }
    }
  }
}
.rotating-box {
  width: 800rpx;
  height: 800rpx;
  position: relative;
  margin: 100rpx 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  .rotating-element {
    width: 100%;
    height: 100%;
    animation: rotate 3s linear infinite;
    background-image: url(../static/other/radar.png);
    border-radius: 100%;
    background-size: 100% 100%;
  }
  img {
    width: 200rpx;
    height: 200rpx;
    border-radius: 100%;
    object-fit: cover;
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.portrait-container {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 100rpx 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
// .avatar {
//   width: 200rpx;
//   height: 200rpx;
//   border: 2px solid #24d4d1;
//   overflow: hidden;
//   border-radius: 100%;
//   z-index: 2;
//   position: absolute;
//   top: 50%;
//   left: 50%;
//   transform: translate(-50%, -50%);
//   img{
//     width: 100%;
//     height: 100%;
//     border-radius: 100%;
//   }
//   // object-fit: cover;
// }

/* 背景同心圆系统 */
.concentric-bg {
  width: 800rpx;
  height: 800rpx;
  position: relative;
  overflow: hidden;
}

.bg-circle {
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.matching-button {
  /* 渐变背景 */
  background: linear-gradient(135deg, #ff99cc 0%, #cc99ff 100%);

  /* 文字样式 */
  color: white;
  font-size: 32rpx;
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;

  /* 布局 */
  display: flex;
  justify-content: center;
  align-items: center;

  /* 交互效果 */
  transition: transform 0.2s;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.matching-button2 {
  background: linear-gradient(
    90deg,
    #ff7474 0%,
    #fca6e2 47%,
    #fff8c6 100%
  ) !important;
}

.matching-button:active {
  transform: scale(0.98);
}

/* 省略号跳动动画 */
.loading-dots {
  display: flex;
  gap: 2px;
}

.dot {
  animation: dotBounce 0.8s infinite ease-in-out;
  transform-origin: bottom;
}

.dot:nth-child(2) {
  animation-delay: 0.2s;
}

.dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes dotBounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8rpx);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

// 反向旋转动画定义
@keyframes rotateReverse {
  from {
    transform: rotate(360deg);
  }

  // 初始角度与父元素结束角度一致
  to {
    transform: rotate(0deg);
  }

  // 结束角度与父元素初始角度一致
}
</style>
